<template>
	<view>
		<view class="sticky-header">
			<!-- 头部 -->
			<SearchBar @search="doSearch" :keyword="keyword"/>

			<!-- 过滤菜单 -->
			<view class="filter-menu">
				<view :class="{active:activeIndex===index}" v-for="(item, index) in menuList" :key="index" @click="changeIndex(index)">{{item}}
				</view>
			</view>
		</view>

		<!-- 商品列表 -->
		<view class="goods-list">
			<view class="goods" v-for="(item, index) in goodsList" :key="index" @click="toItem(item.goods_id)">
				<image :src="item.goods_small_logo" alt=""/>
					<view class="right">
						<view class="goods-name text-line2">{{item.goods_name}}</view>
						<view class="price">￥<text>{{item.goods_price}}</text>.00</view>
					</view>
			</view>
		</view>
		<view class="btm-line" v-show="isLastPage">
			--我是有底线--
		</view>
	</view>
</template>

<script>
// 引入
import SearchBar from '@/components/SearchBar'

const PAGE_SIZE = 6
export default {
  // 注册
  components: {
    // 组件名:具体的组件
    // SearchBar:SearchBar
    SearchBar
  },
  data () {
    return {
      menuList: [
        '综合',
        '销量',
        '价格'
      ],
      // 默认在过滤栏里面选中第一个
      activeIndex: 0,
      // 搜索关键字
      keyword: '',
      // 商品列表
      goodsList: [],
      // 默认不是最后一页
      isLastPage: false
    }
  },
  onLoad (options) {
    // 页码
    this.pageNum = 1
    // 默认不在请求中
    this.isRequesting = false
    this.keyword = options.keyword
    // 发请求
    this.queryGoodsList()
  },
  // 用户下拉触发方法
  // 加载第一页的商品列表
  onPullDownRefresh () {
    this.reload()
  },
  // 用户上拉时触发方法
  // 加载下一页的商品列表
  onReachBottom () {
    this.pageNum++
    this.queryGoodsList()
  },
  methods: {
    // 触发搜索
    doSearch (inputVal) {
      this.keyword = inputVal
      // 拿到搜索框的值,搜索
      this.reload()
    },
    // 跳转到商品详情页
    toItem (goodsId) {
      wx.navigateTo({
        url: '/pages/item/main?goodsId=' + goodsId
      })
    },
    reload () {
      // 如果上拉加载到最后一页,再次下拉刷新需要重置为false
      this.isLastPage = false
      this.pageNum = 1
      // 清空goodsList数据
      this.goodsList = []
      this.queryGoodsList()
    },
    changeIndex (index) {
      this.activeIndex = index
    },
    // 根据关键字发请求
    async queryGoodsList () {
      // 如果正在请求中或者是最后一页时，拒绝
      if (this.isRequesting || this.isLastPage) {
        return
      }
      // 请求前,设置正在请求中
      this.isRequesting = true
      let data = await this.$request({
        url: '/api/public/v1/goods/search',
        data: {
          query: this.keyword,
          pagenum: this.pageNum,
          pagesize: PAGE_SIZE
        }
      })

      // 主动停止下拉刷新的动画,兼容性问题主要是H5上的
      wx.stopPullDownRefresh()
      // 请求结束,设置不在请求中
      this.isRequesting = false
      // 应该数据追加
      this.goodsList = [...this.goodsList, ...data.goods]
      // 当商品列表的长度和total一致时,就是最后一页
      if (this.goodsList.length >= data.total) {
        this.isLastPage = true
      }
    }
  }
}
</script>

<style lang="less">
	.sticky-header {
		position: sticky;
		top: 0;
		background-color: #fff;
		z-index: 100;
	}

	.header {
		height: 120rpx;
		padding: 30rpx 16rpx;
		box-sizing: border-box;
		background-color: #eee;
		position: relative;

		icon {
			position: absolute;
			top: 48rpx;
			left: 44rpx;
		}

		input {
			height: 60rpx;
			width: 100%;
			border-radius: 4rpx;
			background-color: #fff;
			padding-left: 80rpx;
			box-sizing: border-box;
		}
	}

	.top-header {
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		background-color: #fff;
	}

	.header {
		height: 120rpx;
		padding: 30rpx 16rpx;
		box-sizing: border-box;
		background-color: #eee;
		position: relative;

		icon {
			position: absolute;
			top: 48rpx;
			left: 44rpx;
		}

		input {
			height: 60rpx;
			width: 100%;
			border-radius: 4rpx;
			background-color: #fff;
			padding-left: 80rpx;
			box-sizing: border-box;
		}
	}

	.filter-menu {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 100rpx;

		view.active {
			color: #EB4450;
		}
	}

	.goods {
		border-top: 1rpx solid #ddd;
		height: 260rpx;
		box-sizing: border-box;
		padding: 0 20rpx;
		display: flex;
		align-items: center;

		image {
			width: 200rpx;
			height: 200rpx;
		}

		.right {
			flex: 1;
			margin-left: 26rpx;

			.price {
				color: #eb4450;
				font-size: 24rpx;
				margin-top: 80rpx;

				text {
					font-size: 36rpx;
				}
			}
		}
	}

	.btm-line {
		text-align: center;
	}
</style>
